<template>
  <div class="mall">
    <el-dialog
      :title="opertateType === 'add' ? '添加商品' : '更新商品'"
      :visible.sync="dialogVisible">
      <compon-form
        class="goods-input"
        :formLabel="addGoodsFormLabel"
        :form="opertateFormLabel"
        :inline="false"
        ref="opertateFormLabel">
      </compon-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subGoodsInfo">确 定</el-button>
      </div>
    </el-dialog>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/mall' }">商品管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div style="margin: 0 0 15px 0; float: left">
            <el-form
              :model="formInline"
              class="demo-form-inline"
              style="float: left">
              <el-input
                placeholder="请输入商品名称"
                v-model="formInline.goodsName"
                style="width: 300px"
                clearable>
                <el-button
                  type="primary"
                  slot="append"
                  icon="el-icon-search"
                  :loading="buttonState"
                  @click="getGoodsList"
                  clearable>
                  搜索
                </el-button>
              </el-input>
            </el-form>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="float: left; margin-left: 15px; height: 40px"
              @click="addGoods">
              添加
            </el-button>
            <el-button 
              icon="el-icon-printer" 
              type="success"
              @click="printDemo">
              打印
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <el-table
            :data="goodsTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
            border
            height="316px"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :cell-style="rowStyle">
            <el-table-column
              prop="goodsId"
              label="ID"
              width="60">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="名称"
              width="620">
            </el-table-column>
            <el-table-column prop="goodsPrice" label="价格" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsPrice | showPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsCreateDate"
              label="加入时间"
              :formatter="dateFormat">
            </el-table-column>
            <el-table-column prop="goodsNum" label="库存" width="100">
              <template slot-scope="scope">
                <span>{{
                  scope.row.goodsNum
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="openDialog(scope.row)"
                  icon="el-icon-edit">
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="delGoodsInf(scope.row.goodsId)"
                  icon="el-icon-delete">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import moment from "moment";
import ComponForm from "@/components/ComponForm.vue";
import printJS from 'print-js';

export default {
  components: {
    ComponForm,
  },
  data() {
    return {
      formInline: {
        goodsName: "",
      },
      goodsTable: [],
      //当前第几页
      currentPage: 1,
      //记录数据数量
      total: 0,
      //每一页数据数量
      pageSize: 5,
      addGoodsFormLabel: [
        { model: "goodsName", type: "input", label: "商品名称" },
        { model: "goodsPrice", type: "input", label: "商品价格" },
        { model: "goodsCreateDate", type: "date", label: "加入时间" },
        { model: "goodsNum", type: "input", label: "商品数量" },
      ],
      dialogVisible: false,
      opertateType: "add",
      opertateFormLabel: {
        goodsName: "",
        goodsPrice: "",
        goodsCreateDate: "",
        goodsNum: "",
      },
      loading: false,
      buttonState: false,
    };
  },
  methods: {
    dateFormat(row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    getGoodsList() {
      this.loading = true
      this.buttonState = true
      this.$axios
        .post(this.$store.state.address.url + "findGoods", this.formInline)
        .then(response => {
          if (response.data != null) {
            this.loading = false
            //console.log(response.status);
          }
          if(response.data.length <= 0){
            this.$message.warning("数据库里还没有该项记录！！！")
          }
          this.goodsTable = response.data;
          //将获取到的数据数量赋给total
          this.total = this.goodsTable.length;
        });
        setTimeout(() => {
          this.buttonState = false
        }, 3000)
    },
    handleSizeChange(val) {
      //显示当前多少条记录
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //当前第几页
      this.currentPage = val;
    },
    addGoods() {
      this.dialogVisible = true;
      this.opertateType = "add";
      this.opertateFormLabel = {
        goodsName: "",
        goodsPrice: "",
        goodsCreateDate: "",
        goodsNum: "",
      };
    },
    openDialog(val) {
      this.dialogVisible = true;
      this.opertateType = "edit";
      this.opertateFormLabel = {
        goodsId: val.goodsId,
        goodsName: val.goodsName,
        goodsPrice: val.goodsPrice,
        goodsCreateDate: val.goodsCreateDate,
        goodsNum: val.goodsNum,
      };
    },
    /**删除商品 */
    delGoodsInf(val) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(this.$store.state.address.url + "delGoods", val, {
              headers: {
                "Content-Type": "application/json",
              },
            })
            .then((response) => {
              if (response.data == 1) {
                this.getGoodsList();
              }
            })
            .then((response) => {
              if (response.data === 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTable();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**修改数据 */
    subGoodsInfo() {
      if (this.opertateType === "add") {
        this.$axios
          .post(
            this.$store.state.address.url + "inGoodsInfo",
            this.opertateFormLabel
          )
          .then((response) => {
            if (response.data === 1) {
              this.$message.success("数据提交成功");
              this.getGoodsList();
            }
          });
        this.dialogVisible = false;
      } else {
        this.$axios
          .post(
            this.$store.state.address.url + "upDateGoodsInfo",
            this.opertateFormLabel
          )
          .then((response) => {
            if (response.data === 1) {
              this.$message({
                message: "信息提交成功",
                type: "success",
              });
            }
            this.getGoodsList();
          });
        this.dialogVisible = false;
      }
    },
    rowStyle({row}){
      if (row.goodsNum <= '50') {
        return "background: #F56C6C; color: white; font-weight: 550;";
      } else if (row.goodsNum < '100' || row.goodsNum <= '60') {
        return "background: #E6A23C; color: white;";
      } else {
        return "background: #67C23A; color: white;";
      }
    },
    printDemo(){
      let data = []
      for(var i in this.goodsTable){
        data.push({
          goodsId: this.goodsTable[i].goodsId,
          goodsName: this.goodsTable[i].goodsName,
          goodsPrice: this.goodsTable[i].goodsPrice,
          goodsNum: this.goodsTable[i].goodsNum,
        })
      }
      console.log(data);
      printJS({
        printable: data,
        properties: [
          {
            field: 'goodsId',
            displayName: '商品编号',
            columnSize: 1
          },
          {
            field: 'goodsName',
            displayName: '商品名称',
            columnSize: 1
          },
          {
            field: 'goodsPrice',
            displayName: '商品价格',
            columnSize: 1
          },
          {
            field: 'goodsNum',
            displayName: '库存',
            columnSize: 1
          },
        ],
        type: 'json',
        header: '商品数据',
        gridStyle: 'border: 2px solid #333',
        gridHeaderStyle: 'color: #333; border:2px solid #333',
        targetStyle: 'text-align: center'
      })
    }
  },
  created(){
  },
  filters: {
    showPrice(goodsPrice) {
      return "￥ " + goodsPrice.toFixed(2);
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .el-input-group__append button.el-button {
  background-color: #409eff;
  color: white;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.el-row {
  margin-top: 10px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.block {
  float: right;
  margin-right: 10px;
}
/deep/ .el-input,
.el-input__inner {
  width: 520px;
}
.el-table {
  height: 315px;
  overflow-y: hidden;
}
</style>